<template>
  <div class="UserDetails">
    <div class="search">
      <el-input
        style="width: 300px"
        clearable
        placeholder="请输入内容"
        v-model="id"
      >
        <template slot="prepend">用户ID：</template>
      </el-input>
      <el-button class="btn" @click="search">搜索</el-button>
    </div>
    <el-radio-group v-model="active" @change="search" fill="#7b94d8">
      <el-radio-button label="1">资料详情</el-radio-button>
      <el-radio-button label="2">通话详情</el-radio-button>
      <el-radio-button label="3">业务详情</el-radio-button>
      <el-radio-button label="4">代理详情</el-radio-button>
      <el-radio-button label="5">交易记录</el-radio-button>
      <el-radio-button label="6">发布内容</el-radio-button>
      <el-radio-button label="7">审核参考</el-radio-button>
    </el-radio-group>
    <el-card>
      <Details ref="Details" v-if="active == 1"></Details>
      <CallDetails
        ref="CallDetails"
        :userId="id"
        v-if="active == 2"
      ></CallDetails>
      <Business :userId="id" ref="Business" v-if="active == 3"></Business>
      <AgencyDetails
        :userId="id"
        ref="AgencyDetails"
        v-if="active == 4"
      ></AgencyDetails>
      <TransactionRecords
        ref="TransactionRecords"
        :userId="id"
        v-if="active == 5"
      ></TransactionRecords>
      <Appointment
        ref="Appointment"
        :userId="id"
        v-if="active == 6"
      ></Appointment>
      <ReviewReference
        :userId="id"
        ref="ReviewReference"
        v-if="active == 7"
      ></ReviewReference>
    </el-card>
  </div>
</template>

<script>
import Details from "./components/Details";
import Business from "./components/BusinessDetails";
import CallDetails from "./components/CallDetails";
import Appointment from "./components/Appointment";
import ReviewReference from "./components/ReviewReference";
import TransactionRecords from "./components/TransactionRecords";
import AgencyDetails from "./components/AgencyDetails.vue";
export default {
  components: {
    Details,
    Business,
    CallDetails,
    Appointment,
    ReviewReference,
    TransactionRecords,
    AgencyDetails,
    //    SendGift, LiveRecording, Fans
  },
  data() {
    return {
      value: "",
      id: "",
      active: "1",
    };
  },
  methods: {
    search() {
      switch (this.active) {
        case "1":
          this.$refs.Details.getData(this.id);
          break;
        case "3":
          this.$refs.Business.searchBusiness();
          break;
        case "4":
          this.$refs.AgencyDetails.getUserPull();
          break;
        case "6":
          this.$refs.Appointment.search();
          break;
        case "7":
          this.$refs.ReviewReference.search();
          break;
        case "5":
          this.$refs.TransactionRecords.search();
          break;
        case "2":
          this.$refs.CallDetails.search();
          break;
      }
    },
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.$nextTick(() => {
        this.$refs.Details.getData(this.id);
      });
    }
  },
};
</script>

<style lang="less" scoped>
.UserDetails {
  padding: 20px;
  .search {
    margin-bottom: 20px;
  }
}
</style>